<template>
  <div class="blog">
 
    <el-button type="text" @click="dialogVisible = true">添加博客</el-button>
 <!--    <el-button type="text" @click="dialogVisible = true">编辑博客</el-button> -->
    <el-table :data="blogList" border style="width: 100%">
      <!-- 数据源绑定：显示的是后台的数据 -->
      <el-table-column prop="id" label="编号" width="120"></el-table-column>
      <el-table-column prop="title" label="标题" width="120"></el-table-column>
      <el-table-column prop="img" label="图片" width="120"></el-table-column>
      <el-table-column prop="md_text" label="文本文档" width="120"></el-table-column>
      <el-table-column prop="html_text" label="页面" width="120"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="delBlog(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click="updateBlog(scope.row.id)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


<!-- 提示框 -->
    <el-dialog title="添加博客信息" :visible.sync="dialogVisible" width="30%">
      
      <!-- 表单提交内容 -->
      <el-form>
        <el-form-item label="id">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="form.img"></el-input>
        </el-form-item>

        <el-form-item label="文本文档">
          <el-input v-model="form.md_text"></el-input>
        </el-form-item>
        <el-form-item label="页面">
          <el-input v-model="form.html_text"></el-input>
        </el-form-item>
      </el-form>

       <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    return {
      blogList: [],  //获取数据
      dialogVisible: false,
      //添加数据
      form: {
        id: "",
        img: "",
        title: "",
        md_text: "",
        html_text: ""
      } 
    };
  },
  methods: {
    //获取后台的博客的内容
    getBlog() {
      request.get(`/api/blog`).then(res => {
        this.blogList = res.data.data;
        console.log(this.blogList)
      });
    },


    //添加博客

     onSubmit(){
      request.post(`/api/blog`,{     //先向后台发送数据
          blog:this.form    //要发送的数据  
      })
      .then(() => {       //发送完数据后再调用显示博客内容的方法，然后显示在页面上
        this.getBlog();
  
   
      })
     
    },

    //更新博客数据
    updateBlog(){
      request.put(`/api/blog/${this.id}`,{
        
        data:{
         
          title:this.title,
          img:this.img,
          md_text:this.md_text,
          html_text:this.html_text

        }
      }).then(()=>{
        this.getBlog();
        this.dialogVisible = false;
      })
    },
   

  //删除的提示框
  //删除数据  通过id来进行数据的删除
  delBlog(id) {
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        request.delete(`/api/blog/${id}`).then(() => {
          this.getBlog();
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
   }
},

  created() {
    this.getBlog();
  }
};
</script>
